<template>
  <div>
    <v-dialog v-model="deleteDialog" max-width="350">
      <v-card>
        <v-card-title class="text-h6">确认删除</v-card-title>
        <v-card-text>确定要删除这条操作日志吗？</v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn text @click="deleteDialog = false">取消</v-btn>
          <v-btn color="error" :loading="deleteLoading" @click="confirmDelete">删除</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-card class="full-width-card">
      <v-card-title>操作日志管理</v-card-title>
      <v-card-text>
        <v-row class="mb-4" align="center" no-gutters>
          <v-col cols="12" sm="6" md="3">
            <v-text-field
              v-model="searchOperation"
              label="操作名称搜索"
              clearable
              density="comfortable"
              variant="outlined"
              hide-details
              @keyup.enter="onSearch"
            />
          </v-col>
          <v-col cols="12" sm="6" md="3">
            <v-text-field
              v-model="searchUserId"
              label="用户ID搜索"
              clearable
              density="comfortable"
              variant="outlined"
              hide-details
              @keyup.enter="onSearch"
            />
          </v-col>
          <v-col cols="12" sm="6" md="3">
            <v-text-field
              v-model="startTime"
              label="开始时间"
              type="date"
              clearable
              density="comfortable"
              variant="outlined"
              hide-details
            />
          </v-col>
          <v-col cols="12" sm="6" md="3">
            <v-text-field
              v-model="endTime"
              label="结束时间"
              type="date"
              clearable
              density="comfortable"
              variant="outlined"
              hide-details
            />
          </v-col>
          <v-col cols="12" class="d-flex justify-end mt-4">
            <v-btn
              variant="outlined"
              color="grey-darken-1"
              elevation="0"
              rounded
              @click="onSearch"
              size="large"
              style="height: 40px; min-width: 90px; background: rgba(128,128,128,0.08);"
            >
              搜索
            </v-btn>
          </v-col>
        </v-row>

        <v-data-table
          :items="logs"
          :headers="headers"
          :items-per-page="pageSize"
          hide-default-footer
          class="elevation-1"
        >
          <template v-slot:item.method="{ item }">
            <v-chip :color="item.method === 'GET' ? 'primary' : 'success'" size="small">
              {{ item.method }}
            </v-chip>
          </template>
          <template v-slot:item.operation="{ item }">
            <div class="font-medium">{{ item.operation }}</div>
          </template>
          <template v-slot:item.actions="{ item }">
            <v-btn icon @click="showDeleteDialog(item.log_id)" color="error" size="small" title="删除">
              <v-icon size="18">mdi-delete</v-icon>
            </v-btn>
          </template>
        </v-data-table>

        <div class="d-flex justify-space-between align-center mt-4">
          <span>本页共 {{ logs.length }} 条</span>
          <div class="d-flex align-center">
            <span style="margin-right: 12px;">第{{ page }}页 / 共{{ pageCount }}页</span>
            <OperaPagination 
              v-model="page" 
              :page-size="pageSize" 
              :total="total" 
              @page-change="onPageChange" 
            />
          </div>
        </div>
      </v-card-text>
    </v-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import OperaPagination from '@/components/OperaPagination.vue'
import { getOperationLogList, deleteOperationLog } from '@/api/opera'

const logs = ref([])
const total = ref(0)
const page = ref(1)
const pageSize = ref(10)
const searchOperation = ref('')
const searchUserId = ref('')
const startTime = ref('')
const endTime = ref('')
const deleteDialog = ref(false)
const deleteLoading = ref(false)
let currentLogId = null

const headers = [
  { title: '日志ID', key: 'log_id', width: '200px' },
  { title: '请求方法', key: 'method', width: '100px' },
  { title: '用户ID', key: 'user_id', width: '180px' },
  { title: 'IP地址', key: 'ip', width: '150px' },
  { title: '操作名称', key: 'operation' },
  { title: '操作时间', key: 'create_time', width: '180px' },
  { title: '操作', key: 'actions', width: '100px', align: 'center' }
]

const pageCount = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))

function fetchData() {
  const params = {
    pageNum: page.value,
    pageSize: pageSize.value,
    operation: searchOperation.value,
    userid: searchUserId.value,
    startTime: startTime.value,
    endTime: endTime.value
  }

  getOperationLogList(params)
    .then(res => {
      logs.value = res.data.list || []
      total.value = res.data.total || 0
    })
    .catch(error => {
      console.error('获取操作日志失败:', error)
    })
}

function onPageChange(newPage) {
  console.log('分页变化:', newPage)
  fetchData()
}

function onSearch() {
  page.value = 1
  fetchData()
}

function showDeleteDialog(logId) {
  currentLogId = logId
  deleteDialog.value = true
}

async function confirmDelete() {
  if (!currentLogId) return
  
  deleteLoading.value = true
  try {
    await deleteOperationLog(currentLogId)
    deleteDialog.value = false
    fetchData()
  } catch (error) {
    console.error('删除操作日志失败:', error)
  } finally {
    deleteLoading.value = false
    currentLogId = null
  }
}

onMounted(fetchData)
</script>

<style scoped>
.full-width-card {
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
}

.v-card-text {
  padding: 0 !important;
}

:deep(.v-data-table) {
  padding: 0 !important;
}

.v-btn {
  min-width: 80px;
}
</style>